<template>
  <div>
    <div
      style="
        position: absolute;
        color: #fff;
        top: 10%;
        left: 2%;
        cursor: pointer;
      "
    >
      <div
        @click="tabdiveceFn(item)"
        v-for="item in tabdiveceList"
        :key="item.id"
        style="width: 300px"
      >
        <span v-if="item.id == 2" style="margin-right: 20px">
          {{ item.value }}
        </span>
      </div>
    </div>
    <!-- 设备一 -->
    <div class="data" style="padding-bottom: 50px">
      <div class="data-title">
        <div class="title-center">电池监测大屏</div>
      </div>

      <div class="data-content">
        <div class="con-left fl">
          <!-- 实时统计信息 -->
          <div class="info boxstyle">
            <div class="title">实时统计</div>
            <div class="info-main">
              <ul>
                <li v-for="(item, index) in infoList" :key="index">
                  <img :src="item.icon" :alt="item.altText" /><span>{{
                    item.title
                  }}</span>
                  <p>{{ item.value }}</p>
                </li>
              </ul>
            </div>
          </div>

          <!-- 行业分类图表 -->
          <div class="left-bottom boxstyle">
            <div class="title">本月电池销量占比</div>
            <zuo3 class="charts" id="echartszuo3" />
          </div>
          <!-- 车型分类图表 -->
          <div class="left-bottom boxstyle">
            <div class="title">电池类型占比</div>
            <zuo2 class="charts" id="echartszuo2" />
          </div>
        </div>
        <!-- 中间内容区域 -->
        <div class="con-center fl">
          <!-- 设备地图 -->
          <div class="map-num">
            <p>电池地图(个)</p>
            <div class="num">
              <span
                v-for="num in ['1', '5', '4', '9', '2', '6', '8']"
                :key="num"
                >{{ num }}</span
              >
            </div>
          </div>
          <!-- 地图 -->

          <div class="box" style="position: relative">
            <div class="map">
              <maps class="map4"> </maps>
              <div class="map1"><img src="images/lbx.png" /></div>
              <div class="map2"><img src="images/jt.png" /></div>
              <div class="map3"><img src="images/map.png" /></div>
            </div>

            <!-- <div style="height: 557px; position: relative; z-index: 100"></div> -->
          </div>
          <!-- 充电高峰时间图表 -->
          <div class="cen-bottom boxstyle">
            <div class="title">电池充电高峰时间</div>
            <zhongfooter class="charts" id="echartszhongfooter" />
          </div>
        </div>
        <!-- 右侧内容区域 -->
        <div class="con-right fr">
          <!-- 本月行驶里程TOP5图表 -->
          <div class="right-top boxstyle">
            <div class="title">本周换电次数TOP5</div>
            <you1 class="charts" id="echartsyou1" />
          </div>
          <!-- 报警车辆TOP5图表 -->
          <div class="right-center boxstyle">
            <div class="title">电池报警TOP5</div>
            <you2 class="charts" id="echartsyou2" />
          </div>
          <!-- 电池报警车辆TOP10图表 -->
          <div class="right-bottom boxstyle">
            <div class="title">电池故障TOP5</div>
            <you3 class="charts" id="echartsyou3" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import zuo2 from "@/components/shouyedapingzuo2";
import zuo3 from "@/components/shouyedapingzuo3";
import zhongfooter from "@/components/shouyedapingzhongfooter";
import maps from "@/components/shouyedapingmap";
import you1 from "@/components/shouyedapingyou1";
import you2 from "@/components/shouyedapingyou2";
import you3 from "@/components/shouyedapingyou3";
export default {
  components: {
    zuo2,
    zuo3,
    zhongfooter,
    you1,
    you2,
    you3,
    maps,
  },
  data() {
    return {
      tabdiveceList: [
        { value: "主屏", id: 1 },
        { value: "副屏", id: 2 },
      ],
      infoList: [
        {
          icon: "picture/b3.png",
          altText: "",
          title: "电池总数(个)",
          value: "12,457",
        },
        {
          icon: "picture/b5.png",
          altText: "",
          title: "当前在线数(个)",
          value: "12,457",
        },
        {
          icon: "picture/info-img-3.png",
          altText: "",
          title: "今日换电数(个)",
          value: "21,163",
        },
        {
          icon: "picture/info-img-4.png",
          altText: "",
          title: "今日活跃率(%)",
          value: "74%",
        },
        // ... 其他列表项
      ],
    };
  },
  mounted() {
    // 在此处初始化ECharts实例、地图等JavaScript代码，使用this.$refs来访问DOM元素
  },
  methods: {
    tabdiveceFn(item) {
      if (item.id == 2) {
        this.$router.push({
          path: "/home2",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
/* 导入或直接编写样式 */
@import "../../public/css/common.css";
@import "../../public/css/map.css";
</style>
